import { useEffect, useState } from 'react';
import { getTodayTotalData, getCustomeDesignGrammer } from '@/services/dashBoardService';
import CenterChinaMap from './centerChinaMap';
import BarType from './barTypeForm';
import MixType from './mixTypeForm';
import CustomGrammerType from './customeGrammerForm';
import styles from './index.less';

//Notice 1:类型名称：后面需要跟一个空格
const DashBoard: React.FC<any> = () => {
  //获取今日看板数据
  const [todayData, setTodayData] = useState<any[]>([]);
  const initData = async () => {
    const res = await getTodayTotalData();
    console.log(res);

    const grammer = await getCustomeDesignGrammer({ code: 'historyencon' });

    console.log(grammer);

    //地图组建初始化
    CenterChinaMap(res.data, document.getElementById('centerMap') as HTMLElement);
    //混合看板组建初始化
    MixType(res.data, document.getElementById('leftBottom') as HTMLElement);
    //柱状图初始化
    BarType(
      res.data.list.sort((a: any, b: any) => {
        return parseInt(a.value) - parseInt(b.value); //sort的结果判断是以0为基数不是true或者false
      }),
      document.getElementById('rightCitys') as HTMLElement,
    );
    //自定义看板数据
    CustomGrammerType(
      grammer,
      res.data.historylist,
      document.getElementById('customerGrammer') as HTMLElement,
    );

    //初始化数据信息
    const dashTitleData = [
      { title: '累计确诊', value: res.data.gntotal, id: 8 },
      { title: '累计死亡', value: res.data.deathtotal, id: 7 },
      { title: '累计治愈', value: res.data.curetotal, id: 6 },
      { title: '现存确诊', value: res.data.econNum, id: 5 },
      { title: '现存无症状', value: res.data.asymptomNum, id: 4 },
      { title: '现存重症', value: res.data.heconNum, id: 3 },
      { title: '新增确诊', value: res.data.add_daily.addcon, id: 2 },
      { title: '新增无症状', value: res.data.asymptomNum, id: 1 },
      { title: '新增本土确诊', value: res.data.localconNum, id: 0 },
    ];
    setTodayData(dashTitleData);
  };

  //生命周期方法初始化看板数据
  useEffect(() => {
    initData();

    window.addEventListener('resize', () => {
      window.location.reload();
    });
  }, []);

  /**
   * 根据 新增指标公式
   * 计算 指标对应值
   * @param {指标完整内容} newIndicator
   * @param {当前数据} rowData
   * @return {*} 当前指标对应值
   *
   **/

  // export const newIndicatorValue = (newIndicator: CLOUMS.CLOUMSListItem, rowData: any): any => {
  //   // 指标类型为自定义指标
  //   if (newIndicator.type === '3') {
  //     let resultStr = '';
  //     // 自定义指标的 公式 遍历生成字符串运算 表达式
  //     newIndicator.computed?.forEach((el) => {
  //       switch (el.type) {
  //         case '1':
  //           // 四则运算及符号拼接为 字符串
  //           resultStr += el.name;
  //           break;
  //         case '2':
  //           resultStr += parseFloat(rowData[el.code]);
  //           break;
  //         default:
  //           break;
  //       }
  //     });
  //     /* eval 执行字符串表达式 */
  //     return eval(resultStr);
  //   }
  // };

  //今日基本数据
  function showBasicData() {
    return todayData
      .map((data: any) => {
        return (
          <div key={data.id} className={styles.baseTitle}>
            <div style={{ textAlign: 'center' }}>{data.title}</div>
            <div style={{ textAlign: 'center' }}>{data.value == null ? '0' : data.value}</div>
          </div>
        );
      })
      .reverse();
  }
  return (
    <div>
      <div className={styles.sub}>{showBasicData()}</div>
      <div id="centerMap" style={{ width: '100%', height: 500, marginTop: 100 }} />
      <div className={styles.sub}>
        <div id="leftBottom" className={styles.leftBottom} />
        <div id="rightCitys" className={styles.leftBottom} />
      </div>

      <div id="customerGrammer" style={{ width: '100%', height: 500, marginTop: 100 }} />
    </div>
  );
};

export default DashBoard;
